:root {
    --success: #5EB234;
    --info: #34b5f0;
	--warning: #f0a834;
	--danger: #ff3f3f;

    /*
        light: 20%
        lighter: 40%
        lightest: 60% 
        dark: 20%
        darker: 40%
        darkest: 60%
    */
    --yellow: #f6c50a;
    --yellow_light: #f8d13b;
    --yellow_lighter: #fadc6c;
    --yellow_lightest: #fbe89d;
    --yellow_dark: #c59e08;
    --yellow_darker: #947606;
    --yellow_darkest: #624f04;

    --green: #4F772D;
    --green_light: #729257;
    --green_lighter:#95ad81;
    --green_lightest: #b9c9ab;
    --green_dark:#3f5f24;
    --green_darker: #2f471b;
    --green_darkest: #203012;

    --gray: #415058;
    --gray_light: #677379;
    --gray_lighter: #8d969b;
    --gray_lightest:#b3b9bc;
    --gray_lightestt: #c6cbcd;
    --gray_lightesttt: #d9dcde;
    --gray_lightestttt: #eceeee;
    --gray_dark:#344046;
    --gray_darker:#273035;
    --gray_darkest:#1a2023;

    --gray_dark_fade: #344046c0;
    
    --red: #c0392b;
    --red_light:#cd6155;
    --red_lighter:#d98880;
    --red_lightest:#e6b0aa;
    --red_dark:#9a2e22;
    --red_darker:#73221a;
    --red_darkest:#4d1711;

    --blue: #00437a;
    --blue_light:#336995;
    --blue_lighter:#668eaf;
    --blue_lightest:#99b4ca;
    --blue_dark:#003662;
    --blue_darker:#002849;
    --blue_darkest:#001b31;

    --brown: #6c5c48;
    --brown_light: #897d6d;
    --brown_lighter: #a79d91;
    --brown_lightest: #c4beb6;
    --brown_dark: #564a3a;
    --brown_darker: #41372b;
    --brown_darkest: #2b251d;

    --purple: #7a3699;
    --purple_light: #955ead;
    --purple_lighter: #af86c2;
    --purple_lightest: #caafd6;
    --purple_dark: #622b7a;
    --purple_darker: #49205c;
    --purple_darkest: #31163d;

    --black: #1F292E;
    --white: #ffffff;
    --white_darker: #fefefe;
    --bg: #f0f0f0;

    --bounce: cubic-bezier(0.31, -0.105, 0.43, 1.4);
}
@font-face {
    font-family: RobotoSlab;
    src: url('/fonts/RobotoSlab-Variable.ttf');
}

html, body {
    background-color: var(--bg);
	color: var(--black);
	font-family: Georgia, RobotoSlab, sans-serif;
    text-align: left;
	padding: 0;
	margin: 0;
	width: 100%;
	outline: 0;
	line-height: 1;
    font-size: 10px;
}
body {
    margin-top: 60px;
    z-index: 1;
    position: relative;
}

#header_container a:focus { outline:none }
#header_container a:link, 
#header_container a:visited, 
#header_container a:hover, 
#header_container a:active{
	color:rgb(0,0,65);
}
a {
    text-decoration:none;
}

* {
    transition-duration: 0.37s;
}


.hidden {
    display: none !important;
}

.rotated {
    transform: rotate(180deg);
}


.flex {
    display: flex;
    flex-flow: column;
    justify-content: flex-start;
    align-items: center;
    align-content: center;
    position: absolute;
}


body.busy::before {
    content: '';
    width: 100%;
    height: 100%;
    background-color: var(--bg);
    z-index: 998;
    position: absolute;
    top: 0;
}
body.busy::after {
    content: '';
    background-color: transparent;
    width: 120px;
    height: 120px;
    position: absolute;
    border-radius: 100%;
    border: 8px solid transparent;
    border-left-color: transparent;
    border-left-style: solid;
    border-left-width: 8px;
    border-left: 8px solid var(--yellow);
    animation: 1s rotate linear infinite;
    z-index: 1000;  
    top: 40vh;
}
@keyframes rotate {
    0% {transform: rotate(0deg)}
    100% {transform: rotate(360deg)}
}














.cardcontainer .card {
    background-color: white;
    color: var(--gray);
    min-width: 280px;
    min-height: 100px;
    padding: 10px;
    /* margin: 5px; */
    border-radius: 5px;
    display: flex;
    flex-flow: column;
    position: relative;
    /* overflow: hidden;  */
}

.cardcontainer .card::before {
    content: '';
    box-shadow:  0px 0px 50px -35px var(--gray), 0px 0px 10px -6px var(--gray_dark);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    border-radius: inherit;
}

.cardcontainer .card.large {
    grid-area: largecard;
}
.cardcontainer .card.loading{
    background-color: var(--white_darker);
    box-shadow: none;
}
.cardcontainer .card.loading .item,
.cardcontainer .card.loading hr{
    opacity: 0;
}
.cardcontainer .card.loading::after {
    content: '';
    background-color: transparent;
    width: 50px;
    height: 50px;
    position: absolute;
    top: calc(50% - 25px);
    left: calc(50% - 25px);
    border-radius: 100%;
    border: 4px solid var(--yellow);
    border-top: 4px solid transparent;
    animation: .6s rotate var(--bounce) infinite;
}
@keyframes rotate {
    0% {transform: rotate(0deg) }
    100% {transform: rotate(360deg)}
}

.cardcontainer .card.danger::after {
    content: url("/icons/emergency.svg");
    position: absolute;
    right: 5px;
    top: 5px;
    transform: scale(.7);
}
.cardcontainer .card.warning::after {
    content: url("/icons/warning.svg");
    position: absolute;
    right: 5px;
    top: 5px;
    transform: scale(.7);
}
.cardcontainer .card.danger {
    box-shadow: 0px 0px 0px 3px var(--danger) inset;
}
.cardcontainer .card.warning {
    box-shadow: 0px 0px 0px 3px var(--warning) inset;
}


.cardcontainer .card .cardtitle {
    font-size: 13px;
    font-weight: bold;
}

.cardcontainer .card .icon {
    height: 35px;
    width: 35px;
    user-select: none;
    fill: var(--black);
}
.cardcontainer .card .icon.small {
    height: 25px;
    width: 25px;
}
.cardcontainer .card .icon.large {
    height: 100px;
    width: 100px;
}
.cardcontainer .card .icon.large.anim.bounce {
    animation: 1s bounce linear infinite;
}
@keyframes bounce {
0% {
    animation-timing-function:cubic-bezier(0.138,0.2541,0.2177,0.8747);
    transform:translate(0,0) scaleY(1);
}
37% {
    animation-timing-function:cubic-bezier(0.7679,0.1817,0.8401,0.7167);
    transform:translate(0,-10%) scaleY(1);
}
72.2% {
    animation-timing-function:cubic-bezier(0.1045,0.2026,0.2224,0.9608);
    transform:translate(0,0) scaleY(1);
}
87.2% {
    animation-timing-function:cubic-bezier(0.7463,0.2314,0.8159,0.6941);
    transform:translate(0,10%) scaleY(0.9);
}
100% {
    transform:translate(0,0) scaleY(1);
}}
.cardcontainer .item {
    flex-flow: row;
    align-items: center;
    align-content: center;
    display: flex;
    min-height: 35px;
    position: relative;
    max-width: 100%;
}

.cardcontainer .item.center {
    justify-content: center;
}

.cardcontainer .item .icon {
    width: 25px;
    height: 25px;
}

.cardcontainer .item .itemtitle {
    font-size: 16px;
    color: var(--gray);
    padding: 10px;
    box-sizing: border-box;
}

.cardcontainer .item .itemtitle.noicon{
    margin-left: 25px;
}

.cardcontainer .card hr,
.cardcontainer .card hr.large {
    width: 95%;
    border: 1px solid var(--black);
    border-radius: 5px;
}
.cardcontainer .card hr.small {
    width: 100%;
    border: 1px solid var(--gray_lightest);
}



.cardcontainer .card .iconheader {
    width: 100%;
    height: 25px;
    font-size: 25px;
    height: 50px;
    color: black;
    display: flex;
    align-items: center;
    font-family: Helvetica;
    margin-bottom: 10px;
}

.cardcontainer .card .iconheader .icon {
    height: 50px;
    width: 50px;
    padding: 15px;
}

.cardcontainer .card .iconheader .titlecontainer {
    display: flex;
    flex-direction: column;
}

.cardcontainer .card .iconheader .title {
    font-size: 25px;
    font-weight: bold;
}

.cardcontainer .card .iconheader .date {
    font-size: 14px;
    font-style: italic;
    font-family: monospace;
}




main {
    min-width: 350px;
    margin: 10px;
    display: flex;
    flex-flow: row;
}
main sidebar {
    width: 35%;
    min-width: fit-content;
}









#header_container {
    position: fixed;
    display: flex;
    user-select: none;
    top: 0px;
    width: 100%;
    height: 60px;
    background: var(--yellow);
    z-index: 1000;
    justify-content: space-around;
}

#header_container .title {
    padding: 8px;
    font-size: 30px;
    text-align: left;
    color: var(--blue);
    font-weight: bolder;
    width: 150px;
    display: inline-block;
}

#header_container a[href='/'] {
    display: flex;
    height: 45px;
}

#header_container .logo {
    height: 85px;
    min-height: 85px;
    min-width: 85px;
    top: 10px;
    left: 5px;
    user-select: none;
    border-radius: 1000px;
    box-shadow: 0px 0px 10px 0px var(--gray_light);
    position: relative;
}

#header_container .icon.debug {
    height: 50px;
    width: 50px;
    position: absolute;
    z-index: 1;
    top: 60px;
    left: calc(6% + 160px);
    padding: 2px;
    box-sizing: border-box;
}
.header_line {
    height: 15px;
    width: 100%;
    background-color: var(--blue);
    position: absolute;
    bottom: 0px;
    display: flex;
    flex-flow: row;
    box-shadow: 0px 0px 10px 0px var(--gray);
}


.header_line .item {
    background-color: var(--gray);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 5px;
    margin: 5px;
    border-radius: 5px;
    font-weight: bold;
    font-size: 15px;
}
.header_line input[type="submit"] {
    width: 0px;
    height: 0px;
    padding: 0px;
    margin: 0px;
    border: none;
}
.header_line label {
    display: flex;
    padding-left: 10px;
    padding-right: 10px;
}
.header_line label .icon {
    width: 25px !important;
    height: 25px !important;
}
.header_line .item:hover {
    background-color: var(--white);
}

.header_line .item .icon {
    width: 100%;
    height: 100%;
}

#header_container form#search_form {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 250px;
    height: 32px;
    margin: 6px;
    background-color: var(--white);
    border-radius: 5px;
    box-shadow: 0px 0px 5px -2px var(--gray_dark_fade);
}

#header_container form#search_form input[type="text"]:focus {
    outline: none !important;
    border: none !important;
    box-shadow: none !important;
}

#header_container form#search_form input[type="text"] {
    width: 100%;
    border: none;
    box-sizing: border-box;
    height: 100%;
    border-radius: 500px;
    padding-left: 10px;
}

#header_container form#search_form .divider {
    border-left: 2px solid var(--blue);
    height: 80%;
}

#header_container form#search_form .icon {
    height: 100%;
    user-select: none;
    cursor: pointer;
    display: inline-block;
    width: 28px;
    margin-inline: 6px;
}

#header_container label {
    display: flex;
    justify-content: center;
    align-items: center;
}

#header_container input[type="submit"] {
    width: 0px;
    height: 0px;
    padding: 0px;
    margin: 0px;
    border: none;
}

#header_container .articlebox {
    width: 135px;
    min-width: 135px;
    height: 32px;
    margin: 6px;
    border-radius: 5px;
    z-index: 1;
    font-size: 11px;
    font-weight: bold;
    line-height: 32px;
    color: var(--gray) !important;
    overflow: hidden;
}

#header_container .articlebox:hover {
    height: calc(5 * 32px);
    background-color: var(--white);
    box-shadow: 0px 0px 5px -2px var(--gray_dark_fade);
}

#header_container .articlebox hr {
    width: 0%;
    margin: auto;
    border: 1.5px solid var(--blue);
    border-radius: 5px;
}
#header_container .articlebox:hover hr {
    width: 90%;
}

#header_container .articlebox .articletitle {
    text-align: center;
    width: 100%;
    display: inline-block;
}


#header_container .header_menu {
    width: 100vw;
    max-width: 100%;
    height: 100%;
    display: flex;
    position: relative;
    justify-content: space-evenly;
}





#header_container .loginbox {
    border-radius: 5px;
    box-shadow: 0px 0px 10px 0px var(--yellow_dark) inset;
    box-sizing: border-box;
    font-size: 11px;
    font-weight: bold;
    min-height: 32px;
    height: 32px;
    line-height: 32px;
    margin: 6px;
    right: 15px;
    text-transform: uppercase;
    min-width: 135px;
    z-index: 1;
    overflow: hidden;
}
#header_container .loginbox.loggedin:hover {
    height: calc(5 * 32px);
}
#header_container .loginbox.loggedin:hover hr {
    width: 90%;
}
#header_container .loginbox hr {
    width: 0%;
    margin: auto;
    border: 1.5px solid var(--blue);
    border-radius: 5px;
}
#header_container .loginbox .icon {
    height: 32px;
    width: 32px;
    padding: 6px;
    box-sizing: border-box;
}
#header_container .loginbox .accountitem:first-of-type .icon {
    padding: 3px;
}
#header_container .loginbox .accountitem:first-of-type span {
    text-align: center;
}
#header_container .loginbox .accountitem {
    display: flex;
    color: var(--gray) !important;
    padding-inline: 8px;
}
#header_container .loginbox .accountitem.clickable {
    cursor: pointer;
}
#header_container .loginbox .accountitem.clickable:hover {
    background-color: var(--gray_lightestttt);
}
#header_container .loginbox span {
    width: calc(100% - 34px);
    text-align: right;
}
#header_container .loginbox.loggedin {
    background-color: var(--white);
    box-shadow: 0px 0px 5px -2px var(--gray_dark_fade);
    text-transform: none;
}


footer {
    width: 100%;
    height: 200px;
    /* background-color: var(--blue); */
    margin-top: 160px;
}









.flexcontainer {
    display: flex;
    flex-flow: column;
    justify-content: flex-start;
    align-items: center;
    align-content: center;
    position: absolute;
    top: 100px;
    padding: 15px;
    width: calc(100% - 2*15px);
    min-height: 300px;
    overflow-y: scroll;
}

.logincontainer {
    justify-content: center;
    align-items: center;
}


.flexcontainer.center {
    justify-content: center;
}



#status_container {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    align-items: center;
    align-content: center;
}









attachment {
    display: flex;
    flex-flow: column;
    justify-content: space-evenly;
    position: relative;
    width: calc(100% - 2*3px);
    height: 4em;
    border: 2px solid var(--gray_lightestttt);
    border-radius: 5px;
    padding: 3px;
    font-size: 11px;
}

attachment .icon {
    height: 100%;
    padding: 5px;
    box-sizing: border-box;
    position: absolute;
}

attachment .filename,
attachment .filesize {
    padding-left: 5em;
    font-size: 12px;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
}
attachment .filename {
    font-weight: bold;
}
attachment nota,
attachment a {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    justify-content: right;
    display: flex;
    padding: 12px;
    box-sizing: border-box;
}

attachment ~ attachment {
    margin-top: 8px;
}

.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }



.toggler-wrapper {
	display: block;
	width: 45px;
	height: 25px;
	cursor: pointer;
	position: relative;
    transition: all 0.3s var(--bounce);
}

.toggler-wrapper input[type="checkbox"] {
	display: none;
}

.toggler-wrapper .toggler-slider {
	position: absolute;
	top: 0;
    bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
    transition: inherit;
    background-color: var(--red);
	box-shadow: 0 0 20px 0 rgba(0, 0, 0, .2);
	border-radius: 5px;
}

.toggler-wrapper .toggler-knob {
	position: absolute;
    width: calc(25px - 6px);
	height: calc(25px - 6px);
	border-radius: 5px;
	left: 3px;
	top: 3px;
    transition: inherit;
    background-color: var(--white);
}
.toggler-wrapper .toggler-knob .toggler-icon {
    width: 100%;
    height: 100%;
    transform: scale(0);
    transition: inherit;
    position: absolute;
    transition: all .3s var(--bounce) !important;
}
.toggler-wrapper .toggler-knob .toggler-icon.checked {
    fill: var(--green);
}
.toggler-wrapper .toggler-knob .toggler-icon.unchecked {
    fill: var(--red);
}
.toggler-wrapper .toggler-knob .toggler-icon.indeterminate{
    fill: var(--gray);
}

.toggler-wrapper input[type="checkbox"]:not(:checked):not(:indeterminate) + .toggler-slider .toggler-icon.unchecked,
.toggler-wrapper input[type="checkbox"]:checked:not(:indeterminate) + .toggler-slider .toggler-icon.checked,
.toggler-wrapper input[type="checkbox"]:indeterminate + .toggler-slider .toggler-icon.indeterminate {
    transform: scale(1);
    transition: all .2s .2s var(--bounce);
}

.toggler-wrapper input[type="checkbox"]:checked+.toggler-slider {
    background-color: var(--green);
}
.toggler-wrapper input[type="checkbox"]:checked+.toggler-slider .toggler-knob {
	left: calc(100% - 19px - 3px);
}

.toggler-wrapper input[type="checkbox"]:indeterminate+.toggler-slider {
    background-color: var(--gray);
}
.toggler-wrapper input[type="checkbox"]:indeterminate+.toggler-slider .toggler-knob {
    left: calc(50% - 9px);
}
/*
    <label class="toggler-wrapper red tristate">
        <input form="lf" type="checkbox" name="Publiek" id="button_publish">
        <div class="toggler-slider">
            <div class="toggler-knob">
                <svg class="toggler-icon unchecked" viewBox="0 0 48 48"><path d="m24 27.3-9.9 9.9q-.7.7-1.65.7t-1.65-.7q-.7-.7-.7-1.65t.7-1.65l9.9-9.9-9.9-9.9q-.7-.7-.7-1.65t.7-1.65q.7-.7 1.65-.7t1.65.7l9.9 9.9 9.9-9.9q.7-.7 1.65-.7t1.65.7q.7.7.7 1.65t-.7 1.65L27.3 24l9.9 9.9q.7.7.7 1.65t-.7 1.65q-.7.7-1.65.7t-1.65-.7Z"/></svg>
                <svg class="toggler-icon indeterminate" viewBox="0 0 48 48"><path d="m 7.6658334,26.333452 c -0.6599668,0 -1.2138669,-0.223917 -1.661701,-0.671751 C 5.5562984,25.213867 5.332381,24.659967 5.332381,24 c 0,-0.659967 0.2239174,-1.213867 0.6717514,-1.661701 0.4478341,-0.447834 1.0017342,-0.671751 1.661701,-0.671751 32.3791876,0.03015 6.8259636,0 32.6683336,0 0.659966,0 1.213867,0.223917 1.661701,0.671751 0.447834,0.447834 0.671751,1.001734 0.671751,1.661701 0,0.659967 -0.223917,1.213867 -0.671751,1.661701 -0.447834,0.447834 -1.001735,0.671751 -1.661701,0.671751 -33.3986031,0.03902 0.606739,-0.08188 -32.6683336,0 z"/></svg>
                <svg class="toggler-icon checked" viewBox="0 0 48 48"><path d="M18.9 35.95q-.45 0-.875-.175t-.775-.525L8.2 26.2q-.7-.7-.7-1.7t.7-1.7q.7-.7 1.675-.7.975 0 1.725.7l7.3 7.3 17.5-17.45q.7-.7 1.675-.725.975-.025 1.675.725.7.7.7 1.7t-.7 1.7l-19.2 19.2q-.35.35-.775.525-.425.175-.875.175Z"/></svg>
            </div>
        </div>
    </label>
*/

.checkbox-wrapper,
.checkbox-wrapper { 
    width: 20px;
	height: 20px;
    border-radius: 5px;
	cursor: pointer;
    position: relative;
    margin-right: 210px;
    background-color: var(--white);
    display: flex;
    justify-content: center;
    align-items: center;
	/* box-shadow: 0 0 20px 0 rgba(0, 0, 0, .2), 0 0 0 3px var(--gray_lightesttt) inset; */
    box-shadow: 0px 0px 15px 0px var(--gray_lightestttt), 0 0 0 3px var(--gray_lightestt) inset;
}

.checkbox-wrapper input[type="checkbox"] {
    display: none;
}

.checkbox-wrapper span{
    font-size: 20px;
    cursor: pointer;
    transition: all .2s var(--bounce);
    background-color: transparent;
    display: block;
    width: 10%;
    height: 10%;
    border-radius: inherit;
}

.checkbox-wrapper input[type="checkbox"]:checked + span {
    background-color: var(--gray);
    width: 100%;
    height: 100%;
}
.checkbox-wrapper input[type="checkbox"]:checked + span:before{
    content: "";
    position: absolute;
    top: .4em;
    left: .2em;
    border-right: 3px solid transparent;
    border-bottom: 3px solid transparent;
    transform: rotate(45deg);
    transform-origin: 0% 100%;
    animation: checkbox-check .1s .2s var(--bounce) forwards;
}
.checkbox-wrapper .checkbox-label {
    width: 200px;
    height: 35px;
    line-height: 35px;
    font-size: 15px;
    color: var(--black);
    position: absolute;
    left: 30px;
    user-select: none;
}

@keyframes checkbox-check{
0%{
    width: 0;
    height: 0;
    border-color: white;
    transform: translate3d(0,0,0) rotate(45deg);
} 33%{
    width: .2em;
    height: 0;
    transform: translate3d(0,0,0) rotate(45deg);
} 100%{    
    width: .2em;
    height: .5em;    
    border-color: white;
    transform: translate3d(0,-.5em,0) rotate(45deg);
}}











.iconbutton {
    display: block;
    --buttonmain: var(--red);
    --buttonsuccess: var(--success);
    --buttonfailed: var(--danger);
    background-color: var(--buttonmain); 
    width: 125px;
    height: 30px;
    line-height: 30px;
    margin: auto;
    color: #fff;
    cursor: pointer;
    overflow: hidden;
    position: relative;
    border-radius: 5px;
    box-shadow: 2px 2px 15px -10px var(--gray);
    transition: all 0.3s var(--bounce);
}
.iconbutton.blue {
    --buttonmain: var(--blue);
    --buttonsuccess: var(--blue_dark);
}

.iconbutton.green {
    --buttonmain: var(--green);
    --buttonsuccess: var(--success);
}

.iconbutton.yellow {
    --buttonmain: var(--yellow);
    --buttonsuccess: var(--yellow_light);
}
.iconbutton.gray {
    --buttonmain: var(--gray);
}
.iconbutton.lightgreen {
    --buttonmain: var(--green_light);
    --buttonsuccess: var(--success);
}
.iconbutton.lightbrown {
    --buttonmain: var(--brown_light);
}
.iconbutton.disabled {
    --buttonmain: var(--gray_lighter);
    box-shadow: none;
    pointer-events: none;
}


.iconbutton span {
    pointer-events: none;
    user-select: none;
    width: 72%;
    height: 100%;
    display: block;
    text-align: center;
    line-height: inherit;
    text-transform: uppercase;
    position: relative;
    top: 0;
    left: 0;
    transition: all 0.25s var(--bounce);
}
.iconbutton span::after {
    content: '';
    background-color: rgba(0, 0, 0, .3);
    width: 2px;
    height: 70%;
    position: absolute;
    top: 15%;
    right: -1px;
}
.iconbutton .iconcontainer {
    pointer-events: none;
    user-select: none;
    width: 28%;
    height: 100%;
    right: 0;
    top: 0;
    transition: all 0.25s var(--bounce);
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
}
.iconbutton .iconcontainer .buttonicon {
    height: 50% !important;
    width: auto !important;
    transition: all 0.25s var(--bounce), height 0.25s ease;
}
.iconbutton .iconcontainer .buttonicon.failed,
.iconbutton .iconcontainer .buttonicon.success {
    display: none;
}
.iconbutton.busy span,
.iconbutton.success span, 
.iconbutton.failed span,
.iconbutton.small span,
.iconbutton:not(.disabled):hover span {
    left: -72%;
    opacity: 0;
}
.iconbutton.busy .iconcontainer,
.iconbutton.success .iconcontainer, 
.iconbutton.failed .iconcontainer, 
.iconbutton.small .iconcontainer,
.iconbutton:not(.disabled):hover .iconcontainer {
    width: 100%;
}
.iconbutton.success .iconcontainer .buttonicon,
.iconbutton.failed .iconcontainer .buttonicon,
.iconbutton:not(.disabled):hover .iconcontainer .buttonicon {
    height: 85% !important;
    width: auto !important;
}
.iconbutton.small .iconcontainer .buttonicon {
    height: 65% !important;
}
.iconbutton.busy .iconcontainer .buttonicon,
.iconbutton.failed .iconcontainer .buttonicon,
.iconbutton.success .iconcontainer .buttonicon {
    display: none;
}
.iconbutton.failed .iconcontainer .buttonicon.failed,
.iconbutton.success .iconcontainer .buttonicon.success {
    display: block;
}
.iconbutton.success {
    background-color: var(--buttonsuccess);
}
.iconbutton.failed {
    background-color: var(--buttonfailed);
    animation: shakehorizontal .4s var(--bounce) forwards;
}
.iconbutton:not(.disabled):hover {
    opacity: 0.9;
}
.iconbutton:active {
    opacity: 1;
}
.iconbutton.busy .iconcontainer::after {
    content: '';
    background-color: transparent;
    width: 15px;
    height: 15px;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    border-radius: 100%;
    border: 3px solid var(--white);
    border-top: 3px solid transparent;
    animation: 1.2s rotate linear infinite;
}
.iconbutton.small {
    width: 30px;
    height: 30px;
}
@keyframes rotate {
    0% {transform: rotate(0deg) }
    100% {transform: rotate(360deg)}
}
@keyframes shakehorizontal {
    0% {transform: translateX(0)}
    25% {transform: translateX(5px)}
    50% {transform: translateX(-5px)}
    75% {transform: translateX(5px)}
    100%{transform: translateX(0)}
}


.toast{
    display: flex;
    align-items: center;
    max-width: calc(100% - 10px);
    box-sizing: border-box;
    padding: 15px;
    border-radius: 5px;
    transition: all 0.3s var(--bounce);
    animation: zoomIn .2s var(--bounce) none;
    /* width: 450px; */
    margin: 5px;
    background-color: var(--white);
    --toast: var(--gray);
    word-break: break-word;
    overflow-wrap: anywhere;
    position: relative;
}
.toast::before {
    content: '';
    box-shadow:  0px 0px 30px -5px var(--toast), 0px 0px 10px -6px black;
    position: absolute;
    top: 0;
    left: 0;
    border-radius: inherit;
    width: 100%;
    height: 100%;
    z-index: -1;
}
.toastcontainer {
    display: flex;
    flex-flow: column;
    max-width: 100%;
    box-sizing: border-box;
    z-index: 20;
    position: fixed;
    bottom: 0px;
    left: 0px;
    padding: 20px;
    align-items: flex-start;
}
.toastcontainer.short .toast,
.toast.short {
    max-width: 250px;
}
.toast .toasttext {
    color: var(--toast);
    font-weight: bold;
    font-size: 15px;
    width: 0px;
    margin-left: 0px;
    white-space: nowrap;
    overflow: hidden;
    animation: expandIn .3s .6s var(--bounce) forwards;
    max-width: 450px;
}
.toast .icon {
    position: relative;
}
.toast .icon,
.toast .iconcontainer {
    width: 35px;
    height: 35px;
}
.toast .iconcontainer::after {
    content: '';
    background-color: var(--toast);
    width: 2px;
    height: 70%;
    position: absolute;
    top: 15%;
    left: 60px;
    transform: scale(0);
    animation: zoomIn .3s .9s var(--bounce) forwards;
}
.toast.out .toasttext{
    animation: expandOut .3s var(--bounce) forwards;
}
.toast.out .iconcontainer::after {
    animation: zoomOut .3s var(--bounce) forwards;
}

.toast .toastclose {
    height: 30px;
    user-select: none;
    cursor: pointer;
    transform: scale(0);
    animation: zoomIn .3s 2s var(--bounce) forwards;
    position: absolute;
    right: 0px;
    margin: auto;
    padding: 5px;
}
.toast.out .toastclose {
    display: none;
}


.toast.info {--toast: var(--info);}
.toast.success {--toast: var(--success);}
.toast.warning {--toast: var(--warning);}
.toast.danger {--toast: var(--danger);}
.toast.celebration {--toast: var(--purple_light);}


@keyframes zoomIn {
    0% {transform:scale(0);}
    100% {transform:scale(1);}
}
@keyframes zoomOut {
    0% {transform:scale(1);}
    100% {transform:scale(0);}
}
@keyframes expandIn {
    0% {width: 0px; margin-left: 0px; 
        white-space: nowrap;
        overflow: hidden;
    }
    99% {width: 450px; margin-left: 20px; 
        white-space: nowrap;
        overflow: hidden;
        padding-right: 20px;
    }
    100% {width: 450px; margin-left: 20px; 
        white-space: unset;
        overflow: unset;
        padding-right: 20px;
    }
}
@keyframes expandOut {
    0% {width: 450px; margin-left: 20px; }
    100% {width: 0px; margin-left: 0px;}
}




.wordcloud {
    width: 100vw;
    height: 200vh;
}


div#back {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    font-weight: bold;
    color: var(--gray);
    cursor: pointer;
    position: fixed;
    top: 200px;
    z-index: 1000;
    left: 5%;
    background-color: var(--bg);
    border-radius: 5px; 
    transition-duration: none; 
}
div#back .icon {
    height: 50px;
    width: 50px;
    fill: var(--gray);
}
div#back:hover::after {
    content: "Terug";
    color: var(--yellow);
    padding-right: 10px;
}
div#back:hover .icon { fill: var(--yellow);}

















.notfound {
    width: 100%;
    height: 200px;
    display: none;
    justify-content: center;
    align-items: center;
    flex-flow: column;
}
.notfound .icon {
    height: 100px;
    width: 100px;
    fill: var(--gray);
}
.notfound span {
    color: var(--gray);
    font-weight: bold;
    font-size: 20px;
}




@media screen and (max-width:480px)  { 
    body {
        margin-top: 100px;
    }

    #header_container {
        height: 100px;
    }
    #header_container .header_menu {
        flex-direction: column;
        justify-content: unset;
    }

    #header_container .logo {
        top: 50px;
    }

    #header_container .title {
        position: relative;
        top: 0px;
        left: -65px;
    }

    #header_container .loginbox {
        position: absolute;
        right: 0px;
    }

    #header_container form#search_form {
        width: calc(100% - 100px);
        margin-left: 95px;
        margin-top: 0px;
    }
}



@media screen and (max-width:310px)  { 
    #header_container .loginbox {
        display: none;
    }
}







@media screen and (max-width:320px)  { /* smartphones, iPhone, portrait 480x320 phones */ }
@media screen and (max-width:481px)  { /* portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @ 640 wide. */ }
@media screen and (max-width:641px)  { /* portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones */ }
@media screen and (max-width:961px)  { /* tablet, landscape iPad, lo-res laptops ands desktops */ }
@media screen and (max-width:1025px) { /* big landscape tablets, laptops, and desktops */ }
@media screen and (max-width:1281px) { /* hi-res laptops and desktops */ }